<template>
  <div class="app-container1">
    <div class="sidebar">
      <el-button
        class="sidebar-button"
        type="primary"
        @click="activeTab = 'login'"
        >任务</el-button
      >
      <el-button
        class="sidebar-button"
        type="primary"
        @click="activeTab = 'dashboard'"
        >日历</el-button
      >
    </div>
    <div class="content">
      <Login v-if="activeTab === 'login'" />
      <TaskDashboard v-if="activeTab === 'dashboard'" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Login from "../Login/index.vue";
import TaskDashboard from "../TaskDashboard/index.vue";

const activeTab = ref("login");
</script>

<style scoped lang="scss">
.app-container1 {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  background: #2a7b9b;
  background: linear-gradient(
    90deg,
    rgba(42, 123, 155, 1) 0%,
    rgba(87, 199, 133, 1) 50%,
    rgba(237, 221, 83, 1) 100%
  );
}

.sidebar {
  height: 50px;
  //   background-color: white;
  display: flex;
  .sidebar-button {
    margin-left: 40px;
    margin-top: 10px;
    margin-right: 10px;
  }
}

.content {
  flex: 1;
}
</style>
